<script setup lang="ts">
import { BaseApi } from "@/apis/base.api";
import { useUserStore } from "@/stores/user.store";
import { CheckOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { UtilTool } from "@webxue/common";
import { reactive } from "vue";
import useForm from "@/hooks/useForm";

// 获取详情hook
const { formRef, formState, onValidateFields } = useForm({
  // 获取表单数据
  formState: {} as Record<string, any>,
  // 获取详情数据
  async onInit() {
    const response = await BaseApi.developer.find({ id: useUserStore().userInfo.developerId });
    formState.value = response.data;
    return Promise.resolve(response);
  },
  // 表单校验成功回调
  async onValidateSuccess(values) {
    const response = await BaseApi.developer.update({
      id: useUserStore().userInfo.developerId,
      cbPath: values.cbPath,
    });
    if(response.success) {
      message.success("信息保存成功");
    }
  }
});
const developerInfoData = reactive({
  copyDevKey(){
    UtilTool.copyToClip([formState.value.devKey]);
    message.success("devKey复制成功");
  }
})
</script>

<template>
  <div>
    <AForm ref="formRef" :model="formState" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }" @finish="onValidateFields">
      <div class="flex flex-col gap-2">
        <WebxCard :titleProps="{ title:'开发者信息' }">
          <ARow class="px-2 pb-4">
            <ACol :span="24">
              <AFormItem label="devKey" name="devKey" :rules="[{ required: true, message: '请输入devKey' }]">
                <AInputGroup compact>
                  <AInputPassword v-model:value="formState.devKey" placeholder="请输入devKey" readonly style="width: calc(100% - 88px)" />
                  <AButton type="primary" @click="developerInfoData.copyDevKey">一键复制</AButton>
                </AInputGroup>
              </AFormItem>
            </ACol>
            <ACol :span="24">
              <AFormItem label="回调地址" name="cbPath">
                <AInput v-model:value="formState.cbPath" placeholder="请输入回调地址"/>
              </AFormItem>
            </ACol>
          </ARow>
        </WebxCard>
      </div>
      <AFormItem :labelCol="{ span: 0 }" :wrapperCol="{ span: 24 }">
        <div class="flex justify-end items-center gap-2">
          <AButton type="primary" htmlType="submit"><CheckOutlined /> 保存</AButton>
        </div>
      </AFormItem>
    </AForm>
  </div>
</template>

<style scoped lang="less"></style>
